<template>
  <el-dialog v-model="visible" title="编辑采集数据" width="70%">
    <el-form :model="form" label-width="100px" class="edit-form">

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="噪音(dB)">
            <el-input-number v-model="form.noise" :min="0" :max="200" style="width: 100%" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="震动(mm/s)">
            <el-input-number v-model="form.vibration" :min="0" :max="50" style="width: 100%" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="温度(°C)">
            <el-input-number v-model="form.temperature" :min="-50" :max="200" style="width: 100%" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="电流(A)">
            <el-input-number v-model="form.electricCurrent" :min="0" :max="500" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="采集时间">
            <el-date-picker
              v-model="form.collectTime"
              type="datetime"
              placeholder="请选择采集时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="来源">
            <el-select v-model="form.source" placeholder="请选择" style="width: 100%">
              <el-option label="人工添加" :value="0" />
              <el-option label="首次确认" :value="1" />
              <el-option label="工单列表" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" rows="2" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm">保存修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

const props = defineProps({ plan: Object });
const emit = defineEmits(["confirm"]);

const visible = ref(false);
const form = ref({
  id: null,
  assetId: null,
  noise: 0,
  vibration: 0,
  temperature: 0,
  electricCurrent: 0,
  collectTime: "",
  source: 0,
  remark: "",
  isDelete: 0,
});

function open(row) {
  visible.value = true;
  Object.assign(form.value, {
    id: row.id,
    assetId: row.assetId,
    noise: row.noise ?? 0,
    vibration: row.vibration ?? 0,
    temperature: row.temperature ?? 0,
    electricCurrent: row.electricCurrent ?? 0,
    collectTime: row.collectTime
      ? dayjs(row.collectTime).format("YYYY-MM-DD HH:mm:ss")
      : dayjs().format("YYYY-MM-DD HH:mm:ss"),
    source: row.source ?? 0,
    remark: row.remark ?? "",
    isDelete: row.isDelete ?? 0,
  });
}

function confirm() {
  emit("confirm", {
    ...form.value,
    collectTime: dayjs(form.value.collectTime).format("YYYY-MM-DD HH:mm:ss"),
  });
  visible.value = false;
}

function close() {
  visible.value = false;
}

defineExpose({ open, close });
</script>

<style scoped>
.edit-form {
  padding: 10px 20px;
}
.dialog-footer {
  text-align: right;
  padding-right: 10px;
}
</style>
